<template>
    <el-dialog :class="!visible && 'invisible'"
        class="application-dialog"
        :visible.sync="visible"
        width="80%">
        <div class="pt-4 text-center">
            <h3 id="title" class="dialog-title">新增关联</h3>
        </div>
        <div class="dialog-title-search mb-4" >
            <el-row>
                <el-col :span="12" class="flex">
                    <el-input v-model="form.wd" class="mr-4" placeholder="搜索牌号或名称" clearable></el-input>
                    <el-button class="btn-primary"  @click="fetchData('desc', true)">搜索</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
            :data="source"
            height="500"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="品牌" align="center" :render-header="renderHeader" v-if="roleName == '企业用户'">
                <template slot-scope="{row}">
                    <span class="text-grey font-light">{{ row.manufactureName }}</span>
                </template>
            </el-table-column>
            <el-table-column type="index" width="50" v-else></el-table-column>
            <el-table-column label="类目" align="center" :render-header="typeHeader">
                <template slot-scope="{row}">
                    <span class="text-grey font-light">{{ row.vcatName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="牌号" align="center">
                <template slot-scope="{row}">
                    <span class="text-grey font-light">{{ row.productName  }}</span>
                </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center">
                <template slot-scope="{row}">
                    <span class="text-grey font-light">{{ row.name  }}</span>
                </template>
            </el-table-column>
            <el-table-column label="额度" align="center">
                <template slot-scope="{row}">
                    <span class="text-grey font-light">已关联应用({{ row.statistics.appNum  }} ) 审核中({{ row.statistics.appNum  }}) 剩余额度({{ row.statistics.appNum  }})</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- pagination -->
        <div class="text-center pt-6" v-show="source.length">
            <el-pagination
                @current-change="fetchData('desc')"
                :current-page.sync="form.page"
                :page-size="form.pagesize"
                layout="prev, pager, next"
                :total="form.total">
            </el-pagination>
        </div>
        <div class="flex justify-center my-4">
            <el-button class="btn-info"  @click="close">取消</el-button>
            <el-button class="btn-primary"  @click="confirm">确认关联</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { Dialog , Row , Col , Input ,RadioGroup , RadioButton  , Pagination  } from 'element-ui'

export default {
    components: {
        ElDialog: Dialog,
        ElRow: Row,
        ElCol: Col,
        ElInput: Input,
        ElRadioGroup: RadioGroup,
        ElRadioButton: RadioButton,
        ElPagination: Pagination,
    },
    props: {
        
    },
    data(){
        return {
            source:[],
            visible: false,
            form:{
                wd:'',
                type:null,
                page:1,
                pagesize:10,
                total:0,
            },
            selected:[],
            tabIndex:0,
            brandsList:[],
            categoriesList:[]
        }
    },
    watch: {
        '$route'(val, oldVal) {
            this.form.wd = '';
            this.fetchData('desc');
        },
        'form.wd'(val) {
            if (!val) this.fetchData('desc');
        }  
    },
    computed: {
        role() {
            const role = SessionStore.get('loginMesg').role;
            return role
        },
        roleName() {
            const role = SessionStore.get('loginMesg').role;
            let arr = [
                {
                    key:'5ad5cac1d8219eca40241aa8',
                    name:'企业用户'
                },
                {
                    key:'5ad812751b03e49386ae960c',
                    name:'品牌管理员'
                },
                {
                    key:'5ab07114076547341878f520',
                    name:'频道管理员'
                },
                {
                    key:'570b6c19d3bebd0c4d09b7ba',
                    name:'超级管理员'
                }
            ];
            let _arr = arr.filter(el=>el.key === role)
            return  _arr.length > 0 ? _arr[0].name : '个人用户'
        }
    },
    mounted () {
        this.form.wd = '';
        this.fetchData('desc');
        this.getBrands()
        this.getCategories()
    },
    methods: {
        getCategories(){
            // API.get('categories?catid=8a99e4025aff0268015aff2369c50000',).then(res=>{
            //     console.log(res)
            //     this.categoriesList = res
            // })
            let _params = {
                role:this.role,
                wd:this.form.wd
            }
            API.post('products/search/vcats',_params).then(res=>{
                console.log(res)
                this.categoriesList = res.rows
            })
        },
        getBrands(type){
            let _type = type ? '8a7cc7ae5066c243015073a73fe7007b' : '8a7cc7ae5066c243015073a73fe7007c '
            API.get('brands?type='+_type).then(res=>{
                console.log(res)
                this.brandsList = res
            })
        },
        renderHeader(h, { column, $index }) {
            return h('span', {}, [
                h('span', {}, column.label),
                h('el-popover', { props: {  placement: 'bottom', width: '350', trigger: 'click', }},
                    [   h('div',{'class':'flex items-start'},[
                            h('div',{
                                'class':'flex-1 popover-tab text-grey-darker text-center px-1 py-1 '+ (this.tabIndex ? '': 'active'),
                                on:{
                                    click:()=>{
                                        this.tabIndex = 0
                                        this.getBrands(0)
                                    }
                                }
                            },'国内'),
                            h('div',{
                                'class':'flex-1 popover-tab text-grey-darker text-center px-1 py-1 '+ (this.tabIndex ? 'active': ''),
                                on:{
                                    click:()=>{
                                        this.tabIndex = 1
                                        this.getBrands(1)
                                    }
                                }
                            },'国外'),
                        ]),
                        h('div',{},[
                            h('div',{
                                'class':'float-left w-1/3 text-center px-1 py-2 cursor-pointer',
                                    on:{
                                        click:()=>{
                                            this.form.mid = ''
                                            this.fetchData('desc');
                                        }
                                    }
                            },'不限'),
                            this.brandsList.map(item=>{
                                return h('div',{
                                        'class':'float-left w-1/3 text-center px-1 py-2 cursor-pointer',
                                            on:{
                                                click:()=>{
                                                    this.form.mid = item.id
                                                    this.fetchData('desc');
                                                    document.querySelector("#title").click();    
                                                }
                                            }
                                        },item.cn_abbrev)
                            })
                        ]),
                        h('i', { 'class':'el-icon-arrow-down' ,'style':{cursor: 'pointer'},slot: 'reference', props: { }}, '')
                    ])
            ])
        },
        typeHeader(h, { column, $index }){
            return h('span', {}, [
                h('span', {}, column.label),
                h('el-popover', { props: {  placement: 'bottom', width: '350', trigger: 'click', }},
                    [   
                        h('el-collapse',{
                            props:{
                                accordion:true
                            }
                        },
                        [
                            h('el-collapse-item',{
                                props:{title:'不限'},                               
                            },
                            [
                                h('li',{
                                'class':'list-reset cursor-pointer px-2 my-1',
                                'style':{color:'#3D4852'},
                                on:{
                                    click:()=>{
                                        this.form.vcatid = ''
                                        this.fetchData('desc');
                                        document.querySelector("#title").click();
                                    }
                                }
                                },'不限')
                            ]
                               
                        ),
                        ].concat(
                            this.categoriesList.map(item=>{
                                return  h('el-collapse-item',{props:{title:item.cnname}},
                                        
                                        [
                                            h('ul',{'class':'list-reset'},
                                            item.nodes&&item.nodes.length > 0 ? item.nodes.map(sitem=>{
                                                return  h('li',{
                                                    'class':'list-reset cursor-pointer px-2 my-1',
                                                    'style':{color:'#3D4852'},
                                                    on:{
                                                        click:()=>{
                                                            this.form.vcatid = sitem.id
                                                            this.fetchData('desc');
                                                            document.querySelector("#title").click();
                                                        }
                                                    }
                                                    },sitem.cnname)
                                            }) : []
                        
                                            )
                                        ]
                                        )
                            })
                        )
                        ),
                        h('i', { 'class':'el-icon-arrow-down' ,'style':{cursor: 'pointer'},slot: 'reference', props: { }}, '')
                    ])
            ])
        },
        confirm(){
            this.$emit('confirm',this.selected)
        },
        close(){
            this.visible = false
        },
        handleSelectionChange($event){
            console.log($event)
            this.selected = [].concat($event)
        },
        fetchData(sortBy = 'desc', isSearch = false){
            this.form.so = sortBy.includes('asc') ? 'asc' : 'desc';
            if (isSearch) this.form.page = 1;
            this.form.role = this.role
            API.post('products/search',this.form).then(res=>{
                console.log(res)
                this.source = res.rows
                this.form.total = res.total
            }).catch(err => {
                Ele.$message.error(err.status.msg);
            })
            .finally(() => {
                this.getCategories()
            });
        },
        open(){
            this.visible = true;
        }
    }
}
</script>
<style>
.popover-tab{
    border-bottom:1px solid #f0f0f0;
}
.popover-tab.active{
    border-bottom: 2px solid #02a7fd;
    font-weight: bold;
    color: #02a7fd;
}
.no-style{

}
</style>

<style lang="scss">
    .application-dialog {
        .el-dialog {
            margin-top: 10vh;
            height: 80vh;
            overflow-y: scroll;
            font-size: 16px;
        }
        .el-dialog__body {
            padding-top: 0;
            font-size: 16px;
        }
        .el-dialog__header {
            padding: 10px 0 0;
        }
        header {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-top: 10px;
        }
        .dialog-title{
            font-size: 20px;
            line-height: 1.5;
        }
        .dialog-title-sub{
            font-size: 14px;
        }
        .dialog-title-search{
            padding:15px 0 25px ;
            border-bottom: 1px solid #f0f0f0;
        }
        &-parent{
            font-size: 16px;
            color: #000;
        }
        &-subname{
            font-size: 14px;
            color: #a9a9a9;
        }
        &-tag{
            cursor: pointer;
            height: 50px;
            line-height: 50px;
            background-color: #eef9ff;
            border-radius: 7px;
            border: 1px solid #eef9ff;
            color: #409EFF;
        }
        &-tag-selected{
            border-color: #409EFF;
            background-color: #fff;
        }
        &-tip{
            font-size: 14px;
            color: #e64d60;
        }

    }
</style>

